<template>
	<base-popup
		class="max-h-[80vh]"
		:show="show"
		@close="onClose"
		titleT="transactionType.bet"
		titleIcon="bet_result">
		<div v-if="!loading">
			<div class="py-[32px] px-[36px]">
				<n-flex>
					<div class="w-[108px] h-[144px] mr-[16px] md:mb-[0]">
						<base-image
							:src="gameData.gameVO?.icon"
							type="network"
							class="w-full rounded-lg"></base-image>
					</div>
					<div style="flex: auto">
						<n-flex
							justify="space-between"
							class="pb-[10px]"
							style="border-bottom: 1px solid rgba(150, 165, 170, 0.1)">
							<div class="text-base">
								<p>{{ titleKv[gameType] }}</p>
								<div class="md:flex hidden">
									<base-router
										name="casinoTags"
										class="text-[#7864ff]"
										:params="{ id: item.tagSlug }"
										v-for="(item, index) in gameDetailStore.currentGameDetails?.gameTagInfo"
										:key="index">
										{{ item.labelName }}
									</base-router>
								</div>
							</div>
							<div>
								<base-router
									name="casinoTags"
									class="text-[#7864ff]"
									:params="{ id: '2up-originals' }">
									<base-icon name="arrow_right" :size="36" class="cursor-pointer text-[#fff]" />
								</base-router>
							</div>
						</n-flex>
						<div class="mt-[10px]">
							<p class="flex">
								<img class="w-[20px]" src="@/assets/img/game/result-username.svg" />
								<span class="ml-[8px] text-base">{{ gameData.player }}</span>
							</p>
							<p class="flex items-center justify-between text-[#96a5aa] mt-[8px]">
								<n-ellipsis class="text-sm" style="max-width: calc(100% - 50px)">
									ID {{ gameData.round }}
								</n-ellipsis>
								<base-copy class="text-base" :value="gameData.round"></base-copy>
							</p>
							<p class="flex text-sm text-[#96a5aa] mt-[5px]">
								{{ formatTimestamp(gameData.createdAt) }}
							</p>
						</div>
					</div>
				</n-flex>
				<div class="game-logo h-[24px] flex justify-center items-center mt-[12px]">
					<span class="bg-[#1B2538] px-[12px]">
						<img src="@/assets/img/slots/logo-whiteRb0.5.svg" class="h-full" />
					</span>
				</div>
				<div class="game-wrap">
					<div
						class="mt-[10px] px-[40px] py-[20px] rounded-lg flex text-base"
						style="background-color: rgba(150, 165, 170, 0.1)">
						<div class="w-[33.3%] text-center">
							<p class="text-[#96a5aa]">{{ $t('miniGames.betAmount') }}</p>
							<p class="flex justify-center items-center mt-[10px]">
								<span class="text-[#fff] mr-[4px]">{{ numberFixed(gameData.amount || 0) }}</span>
								<BaseCurrencyFait class="w-[14px] h-[14px]" />
							</p>
						</div>
						<div class="w-[33.3%] text-center">
							<p class="text-[#96a5aa]">{{ $t('miniGames.multiplier') }}</p>
							<p class="flex justify-center mt-[10px]">
								<span class="text-[#fff] mr-[4px]">
									{{ transferToNumber(Number(gameData.payoutMultiplier || 0).toFixed(2)) }}x
								</span>
							</p>
						</div>
						<div class="w-[33.3%] text-center">
							<p class="text-[#96a5aa]">{{ $t('miniGames.payout') }}</p>
							<p class="flex justify-center items-center mt-[10px]">
								<span class="mr-[4px]" :class="payoutStatusClass()">
									{{ payoutStatusF() }}{{ numberFixed(gameData.payout || 0) }}
								</span>
								<BaseCurrencyFait class="w-[14px] h-[14px]" />
							</p>
						</div>
					</div>
					<div
						class="mt-[10px] rounded-md border-2 border-border-1 p-[20px] flex justify-center"
						ref="gameContent">
						<div
							v-if="loadingGameOut"
							class="w-[100%] min-h-[50px] mt-4 flex justify-center items-center">
							<base-loading block></base-loading>
						</div>
					</div>
					<div class="flex justify-between mt-[10px]" v-if="gameType === 'plinko'">
						<div style="width: calc(50% - 5px)">
							<div class="">{{ $t('miniGames.risk') }}</div>
							<div
								class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center text-t-2">
								{{ riskTextMap()[gameData.details?.risk] }}
							</div>
						</div>
						<div style="width: calc(50% - 5px)">
							<div class="">{{ $t('miniGames.row') }}</div>
							<div
								class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center text-t-2">
								{{ gameData.details?.rows }}
							</div>
						</div>
					</div>
					<div class="mt-[10px]" v-else-if="gameType === 'limbo'">
						<div class="">{{ $t('miniGames.multiplier') }}</div>
						<div class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center text-t-2">
							{{ gameData.details?.multiplierTarget }}
						</div>
					</div>
					<div class="mt-[10px]" v-else-if="gameType === 'keno'">
						<div class="">{{ $t('miniGames.risk') }}</div>
						<div class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center text-t-2">
							{{ kenoRiskTextMap()[gameData.details?.risk] }}
						</div>
					</div>
					<div class="flex justify-between mt-[10px]" v-else-if="gameType === 'wheel'">
						<div style="width: calc(50% - 5px)">
							<div class="">{{ $t('miniGames.risk') }}</div>
							<div
								class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center text-t-2">
								{{ riskTextMap()[gameData.details?.risk] }}
							</div>
						</div>
						<div style="width: calc(50% - 5px)">
							<div class="">{{ $t('miniGames.paragraph') }}</div>
							<div
								class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center text-t-2">
								{{ gameData.details?.segments }}
							</div>
						</div>
					</div>
					<div class="mt-[20px]">
						<base-button type="primary" @click="handlePlay">
							<base-icon
								name="arrow_right"
								:size="20"
								class="cursor-pointer text-[#fff] mr-[4px]" />
							{{ $t('miniGames.play') }} {{ titleKv[gameType] }}
						</base-button>
					</div>
				</div>
			</div>
			<!-- 可证明公平性 -->
			<div
				class="fairness-wrap text-t-1 py-[12px] px-[36px]"
				style="background-color: rgba(150, 165, 170, 0.1)">
				<div
					class="h-[20px] flex items-center justify-between cursor-pointer text-base"
					@click="showProvably">
					<span>
						<base-icon name="justice" :size="20" class="cursor-pointer text-[#96a5aa] mr-[4px]" />
						{{ $t('miniGames.provablyFair') }}
					</span>
					<base-icon
						name="down"
						class="ml-1 text-sm duration-300"
						:class="{
							'rotate-180': isOpen
						}"></base-icon>
				</div>
				<div v-show="isOpen" class="text-base duration-300">
					<div class="mt-[16px]">
						<div>{{ $t('miniGames.serverSeed') }}</div>
						<div
							class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center justify-between text-t-2">
							<span class="text-t-4 overflow-text__hidden max-w-[420px]">
								{{ gameData?.serverSeed || $t('miniGames.notSeeds') }}
							</span>
							<base-copy class="text-base" :value="gameData.serverSeed"></base-copy>
						</div>
					</div>
					<div class="mt-[16px]">
						<div>{{ $t('miniGames.clientSeedHashed') }}</div>
						<div
							class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center justify-between text-t-2">
							<span class="text-t-4 overflow-text__hidden max-w-[420px]">
								{{ gameData.serverSeedHash }}
							</span>
							<base-copy class="text-base" :value="gameData.serverSeedHash"></base-copy>
						</div>
					</div>
					<div class="flex items-center justify-between">
						<div class="mt-[16px] mr-[8px]" style="flex: auto">
							<div>{{ $t('miniGames.clientSeed') }}</div>
							<div
								class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center justify-between text-t-2">
								<span class="text-t-4 overflow-text__hidden max-w-[420px]">
									{{ gameData.clientSeed }}
								</span>
								<base-copy class="text-base" :value="gameData.clientSeed"></base-copy>
							</div>
						</div>
						<div class="mt-[16px] w-[140px]">
							<div>{{ $t('miniGames.nounceSeed') }}</div>
							<div
								class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center justify-between text-t-2">
								<span class="text-t-4">{{ gameData.nonce }}</span>
								<base-copy class="text-base" :value="`${gameData.nonce}`"></base-copy>
							</div>
						</div>
					</div>
					<div class="">
						<div class="py-[10px] text-center text-t-4">
							{{ $t('miniGames.rotateSeedInfo') }}
						</div>
						<base-button type="primary" @click="handleRotate">
							{{ gameData?.serverSeed ? $t('miniGames.verification') : $t('miniGames.rotate') }}
						</base-button>
						<!-- <div class="text-primary text-center mt-[10px]">
							<span class="cursor-pointer">{{ $t('miniGames.whatProvablyFair') }}</span>
						</div> -->
					</div>
				</div>
			</div>
		</div>
		<div v-else class="w-[100%] min-h-[50vh] mt-4 flex justify-center items-center">
			<base-loading block></base-loading>
		</div>
	</base-popup>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { NFlex, NEllipsis } from 'naive-ui'
import {
	BasePopup,
	BaseCopy,
	BaseIcon,
	BaseImage,
	BaseButton,
	BaseLoading,
	BaseCurrencyFait,
	BaseRouter
} from '@/components/base'
import { viewGamesDetail } from '@/api/third/mini-games'
import { formatTimestamp, getDecimalPlaces, transferToNumber, getFiatlg } from '../../util'
import { useGameDetailStore } from '@/store'
import { riskTextMap, kenoRiskTextMap, titleKv } from '@/views/games/config'
import {
	minesResult,
	plinkoResult,
	diceResult,
	limboResult,
	kenoResult,
	wheelResult
} from './utilResult'

const gameDetailStore = useGameDetailStore()
const isOpen = ref(false)
const gameContent: any = ref(null)
const props = defineProps({
	showDialog: {
		type: Boolean,
		default: false
	},
	gameType: {
		type: String,
		default: 'plinko'
	},
	betId: {
		type: String,
		default: ''
	},
	gameObj: {
		type: Object,
		default: null
	}
})

const show = ref(props.showDialog)
const gameData: any = ref({})
const loading = ref(false)
const loadingGameOut = ref(false)
const emit = defineEmits(['close'])

watch(
	() => props.showDialog,
	(val: boolean) => {
		show.value = val
		if (val) {
			getDetail()
		}
	}
)

const payoutStatusClass = () => {
	if (gameData.value?.details) {
		const { payout, amount } = gameData.value
		const winLose = Number(payout) - Number(amount)
		return Number(amount) === 0 ? 'text-[#fff]' : winLose >= 0 ? 'text-[#00be7a]' : 'text-[red]'
	} else {
		return 'text-[#fff]'
	}
}
const payoutStatusF = () => {
	if (gameData.value?.details) {
		const { payout, amount } = gameData.value
		const winLose = Number(payout) - Number(amount)
		return Number(amount) === 0 ? '' : winLose >= 0 ? '+ ' : '- '
	} else {
		return ''
	}
}
const numberFixed = (number: any) => {
	return getFiatlg() + transferToNumber(Number(number).toFixed(getDecimalPlaces()))
}
const getDetail = async () => {
	console.log(props.betId)
	loading.value = true
	const { data } = await viewGamesDetail({
		round: props.betId
	})
	loading.value = false
	gameData.value = data
	setTimeout(() => {
		if (props.gameType === 'mines') {
			minesResult(gameContent.value, data.details, loadingGameOut)
		} else if (props.gameType === 'plinko') {
			plinkoResult(gameContent.value, data.details, loadingGameOut)
		} else if (props.gameType === 'dice') {
			diceResult(gameContent.value, data.details, loadingGameOut)
		} else if (props.gameType === 'limbo') {
			limboResult(gameContent.value, data.details, loadingGameOut)
		} else if (props.gameType === 'keno') {
			kenoResult(gameContent.value, data.details, loadingGameOut)
		} else if (props.gameType === 'wheel') {
			wheelResult(gameContent.value, data.details, loadingGameOut)
		}
	}, 200)
}

const showProvably = () => {
	isOpen.value = !isOpen.value
}

const handleRotate = () => {
	show.value = false
	emit('close')
	gameDetailStore.setFairnessDialog(true)
	if (gameData.value?.serverSeed) {
		gameDetailStore.setGameResult(gameData.value)
	}
}

const handlePlay = () => {
	show.value = false
	emit('close')
}

const onClose = () => {
	show.value = false
	emit('close')
}
</script>
<style lang="scss" scoped>
.overflow-text__hidden {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.game-logo {
	background: url('@/assets/img/game/bg-circular.svg') repeat-x center center;
}
</style>
